<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4493817" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">云祭祀</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">合同管理</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">费用报销</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">客户跟进记录</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d6;</span>
                <div class="name">施工管理</div>
                <div class="code-name">&amp;#xe8d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84d;</span>
                <div class="name">业务办理</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">仓库维护管理</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">价格维护</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a2;</span>
                <div class="name"> 预约订单</div>
                <div class="code-name">&amp;#xe8a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">墓穴设计</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cf;</span>
                <div class="name">物品领取</div>
                <div class="code-name">&amp;#xe9cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">提醒</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">业务统计</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">退墓管理</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">描金描红</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">业务办理</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">营销管理</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">档案管理</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaca;</span>
                <div class="name">服务管理</div>
                <div class="code-name">&amp;#xeaca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec36;</span>
                <div class="name">工单确认</div>
                <div class="code-name">&amp;#xec36;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">修缮维修</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">预约记录</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">纪念馆/博物馆/会展中心</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">会议管理</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">申请</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">仓库管理</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">出库管理</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">入库管理</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">合同管理</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">cloud-port</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">基础设置</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">员工档案</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82c;</span>
                <div class="name">销售列表</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">采购管理</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">仓储物品进出统计</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">微信端管理</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">服务中心</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">家族族谱</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">综合业务查询</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">工程服务</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">决策分析</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">业务统计分析</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">销售列表</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">销售报表</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">趋势分析统计</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">审核管理</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">工单管理</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">墓位墓区变更</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">仓库管理</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">会员设置</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">到访管理</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">服务登记</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">仓库管理</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">物品管理</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">墓位证打印</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">结算管理</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">营销统计</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">地域分析报表</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">购买记录</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97f;</span>
                <div class="name">寄存取走</div>
                <div class="code-name">&amp;#xe97f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">墓位证或权证变更</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">代客祭扫</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">库存上下限管理</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">客户跟进</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">墓型管理设置</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">修缮清理</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">预约记录</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">会员设置</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">生态葬</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">仓库盘点</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">墓位图，墓位信息</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">服务管理</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">墓位墓区设置</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">落葬管理1</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">瓷像1</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">碑文1</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">工程服务登记</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">购买记录</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">刻字</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">客户登记</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">时间设置</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1712130840412') format('woff2'),
       url('iconfont.woff?t=1712130840412') format('woff'),
       url('iconfont.ttf?t=1712130840412') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-yunjisi"></span>
            <div class="name">
              云祭祀
            </div>
            <div class="code-name">.icon-yunjisi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hetongguanli"></span>
            <div class="name">
              合同管理
            </div>
            <div class="code-name">.icon-hetongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoxiao"></span>
            <div class="name">
              费用报销
            </div>
            <div class="code-name">.icon-baoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontzhizuobiaozhunBduan-"></span>
            <div class="name">
              客户跟进记录
            </div>
            <div class="code-name">.icon-iconfontzhizuobiaozhunBduan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anzhuangshigong-xianxing"></span>
            <div class="name">
              施工管理
            </div>
            <div class="code-name">.icon-anzhuangshigong-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yewubanli"></span>
            <div class="name">
              业务办理
            </div>
            <div class="code-name">.icon-yewubanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangweiweihu"></span>
            <div class="name">
              仓库维护管理
            </div>
            <div class="code-name">.icon-cangweiweihu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caiwujichushezhi"></span>
            <div class="name">
              价格维护
            </div>
            <div class="code-name">.icon-caiwujichushezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyuedingdan"></span>
            <div class="name">
               预约订单
            </div>
            <div class="code-name">.icon-yuyuedingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sheji"></span>
            <div class="name">
              墓穴设计
            </div>
            <div class="code-name">.icon-sheji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hebingxingzhuang"></span>
            <div class="name">
              物品领取
            </div>
            <div class="code-name">.icon-hebingxingzhuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tixing1"></span>
            <div class="name">
              提醒
            </div>
            <div class="code-name">.icon-tixing1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yewutongji"></span>
            <div class="name">
              业务统计
            </div>
            <div class="code-name">.icon-yewutongji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-hulvegaojing"></span>
            <div class="name">
              退墓管理
            </div>
            <div class="code-name">.icon-icon-hulvegaojing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianxie"></span>
            <div class="name">
              描金描红
            </div>
            <div class="code-name">.icon-tianxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yewubanli1"></span>
            <div class="name">
              业务办理
            </div>
            <div class="code-name">.icon-yewubanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiaoguanli"></span>
            <div class="name">
              营销管理
            </div>
            <div class="code-name">.icon-yingxiaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuangongdangan"></span>
            <div class="name">
              档案管理
            </div>
            <div class="code-name">.icon-yuangongdangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuwuguanli"></span>
            <div class="name">
              服务管理
            </div>
            <div class="code-name">.icon-fuwuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongdanqueren"></span>
            <div class="name">
              工单确认
            </div>
            <div class="code-name">.icon-gongdanqueren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiu1"></span>
            <div class="name">
              修缮维修
            </div>
            <div class="code-name">.icon-weixiu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodeyuyue"></span>
            <div class="name">
              预约记录
            </div>
            <div class="code-name">.icon-wodeyuyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huizhanzhongxin"></span>
            <div class="name">
              纪念馆/博物馆/会展中心
            </div>
            <div class="code-name">.icon-huizhanzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyiguanli"></span>
            <div class="name">
              会议管理
            </div>
            <div class="code-name">.icon-huiyiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenqing"></span>
            <div class="name">
              申请
            </div>
            <div class="code-name">.icon-shenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangkuguanli-"></span>
            <div class="name">
              仓库管理
            </div>
            <div class="code-name">.icon-cangkuguanli-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chukuguanli-"></span>
            <div class="name">
              出库管理
            </div>
            <div class="code-name">.icon-chukuguanli-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rukuguanli-"></span>
            <div class="name">
              入库管理
            </div>
            <div class="code-name">.icon-rukuguanli-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hetongguanli1"></span>
            <div class="name">
              合同管理
            </div>
            <div class="code-name">.icon-hetongguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--"></span>
            <div class="name">
              cloud-port
            </div>
            <div class="code-name">.icon--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichushezhi"></span>
            <div class="name">
              基础设置
            </div>
            <div class="code-name">.icon-jichushezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuangongdangan1"></span>
            <div class="name">
              员工档案
            </div>
            <div class="code-name">.icon-yuangongdangan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoshouliebiao"></span>
            <div class="name">
              销售列表
            </div>
            <div class="code-name">.icon-xiaoshouliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigou-"></span>
            <div class="name">
              采购管理
            </div>
            <div class="code-name">.icon-caigou-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangchuguanli-cangkuguanli"></span>
            <div class="name">
              仓储物品进出统计
            </div>
            <div class="code-name">.icon-cangchuguanli-cangkuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixinduanguanli"></span>
            <div class="name">
              微信端管理
            </div>
            <div class="code-name">.icon-weixinduanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuwuguanli1"></span>
            <div class="name">
              服务中心
            </div>
            <div class="code-name">.icon-fuwuguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiazuzupu-"></span>
            <div class="name">
              家族族谱
            </div>
            <div class="code-name">.icon-jiazuzupu-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishijilu"></span>
            <div class="name">
              综合业务查询
            </div>
            <div class="code-name">.icon-lishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiufuwuzhongxin"></span>
            <div class="name">
              工程服务
            </div>
            <div class="code-name">.icon-weixiufuwuzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juecefenxi"></span>
            <div class="name">
              决策分析
            </div>
            <div class="code-name">.icon-juecefenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongjifenxi1"></span>
            <div class="name">
              业务统计分析
            </div>
            <div class="code-name">.icon-tongjifenxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-taocanxiaoshoubaobiao"></span>
            <div class="name">
              销售列表
            </div>
            <div class="code-name">.icon-taocanxiaoshoubaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangmuxiaoshoubaobiao"></span>
            <div class="name">
              销售报表
            </div>
            <div class="code-name">.icon-xiangmuxiaoshoubaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongjifenxi2"></span>
            <div class="name">
              趋势分析统计
            </div>
            <div class="code-name">.icon-tongjifenxi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenheguanli"></span>
            <div class="name">
              审核管理
            </div>
            <div class="code-name">.icon-shenheguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongdanguanli"></span>
            <div class="name">
              工单管理
            </div>
            <div class="code-name">.icon-gongdanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biangengguanli1"></span>
            <div class="name">
              墓位墓区变更
            </div>
            <div class="code-name">.icon-biangengguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangkuguanli"></span>
            <div class="name">
              仓库管理
            </div>
            <div class="code-name">.icon-cangkuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanshezhi"></span>
            <div class="name">
              会员设置
            </div>
            <div class="code-name">.icon-huiyuanshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xindaofangguanli"></span>
            <div class="name">
              到访管理
            </div>
            <div class="code-name">.icon-xindaofangguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuwudengji1"></span>
            <div class="name">
              服务登记
            </div>
            <div class="code-name">.icon-fuwudengji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cangkuguanlikufangguanli"></span>
            <div class="name">
              仓库管理
            </div>
            <div class="code-name">.icon-cangkuguanlikufangguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wupinguanli-05"></span>
            <div class="name">
              物品管理
            </div>
            <div class="code-name">.icon-wupinguanli-05
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-operation_business_icon"></span>
            <div class="name">
              墓位证打印
            </div>
            <div class="code-name">.icon-operation_business_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuanguanli1"></span>
            <div class="name">
              结算管理
            </div>
            <div class="code-name">.icon-jiesuanguanli1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiaotongji-01"></span>
            <div class="name">
              营销统计
            </div>
            <div class="code-name">.icon-yingxiaotongji-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangyang"></span>
            <div class="name">
              地域分析报表
            </div>
            <div class="code-name">.icon-fangyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goumaijilu1"></span>
            <div class="name">
              购买记录
            </div>
            <div class="code-name">.icon-goumaijilu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exit-full"></span>
            <div class="name">
              寄存取走
            </div>
            <div class="code-name">.icon-exit-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biangengguanli2"></span>
            <div class="name">
              墓位证或权证变更
            </div>
            <div class="code-name">.icon-biangengguanli2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daikejisao"></span>
            <div class="name">
              代客祭扫
            </div>
            <div class="code-name">.icon-daikejisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kucunshangxiaxianguanli"></span>
            <div class="name">
              库存上下限管理
            </div>
            <div class="code-name">.icon-kucunshangxiaxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kehugenjin3"></span>
            <div class="name">
              客户跟进
            </div>
            <div class="code-name">.icon-kehugenjin3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongmui"></span>
            <div class="name">
              墓型管理设置
            </div>
            <div class="code-name">.icon-gongmui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiazhengqingjie"></span>
            <div class="name">
              修缮清理
            </div>
            <div class="code-name">.icon-jiazhengqingjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyuejilu"></span>
            <div class="name">
              预约记录
            </div>
            <div class="code-name">.icon-yuyuejilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanshezhi1"></span>
            <div class="name">
              会员设置
            </div>
            <div class="code-name">.icon-huiyuanshezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-shengtai1"></span>
            <div class="name">
              生态葬
            </div>
            <div class="code-name">.icon-a-shengtai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-Inventoryofcirculationproducts"></span>
            <div class="name">
              仓库盘点
            </div>
            <div class="code-name">.icon-a-Inventoryofcirculationproducts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-OMS-dingdanzhihanggenzong"></span>
            <div class="name">
              墓位图，墓位信息
            </div>
            <div class="code-name">.icon-OMS-dingdanzhihanggenzong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanshengchan"></span>
            <div class="name">
              服务管理
            </div>
            <div class="code-name">.icon-anquanshengchan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caiyongdanweiguanli"></span>
            <div class="name">
              墓位墓区设置
            </div>
            <div class="code-name">.icon-caiyongdanweiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lzgl1"></span>
            <div class="name">
              落葬管理1
            </div>
            <div class="code-name">.icon-lzgl1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cixiang1"></span>
            <div class="name">
              瓷像1
            </div>
            <div class="code-name">.icon-cixiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beiwen1"></span>
            <div class="name">
              碑文1
            </div>
            <div class="code-name">.icon-beiwen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongchengfuwu"></span>
            <div class="name">
              工程服务登记
            </div>
            <div class="code-name">.icon-gongchengfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goumaijilu2"></span>
            <div class="name">
              购买记录
            </div>
            <div class="code-name">.icon-goumaijilu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kezi1"></span>
            <div class="name">
              刻字
            </div>
            <div class="code-name">.icon-kezi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kehudengji1"></span>
            <div class="name">
              客户登记
            </div>
            <div class="code-name">.icon-kehudengji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijianshezhi"></span>
            <div class="name">
              时间设置
            </div>
            <div class="code-name">.icon-shijianshezhi
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunjisi"></use>
                </svg>
                <div class="name">云祭祀</div>
                <div class="code-name">#icon-yunjisi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hetongguanli"></use>
                </svg>
                <div class="name">合同管理</div>
                <div class="code-name">#icon-hetongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoxiao"></use>
                </svg>
                <div class="name">费用报销</div>
                <div class="code-name">#icon-baoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontzhizuobiaozhunBduan-"></use>
                </svg>
                <div class="name">客户跟进记录</div>
                <div class="code-name">#icon-iconfontzhizuobiaozhunBduan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anzhuangshigong-xianxing"></use>
                </svg>
                <div class="name">施工管理</div>
                <div class="code-name">#icon-anzhuangshigong-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yewubanli"></use>
                </svg>
                <div class="name">业务办理</div>
                <div class="code-name">#icon-yewubanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangweiweihu"></use>
                </svg>
                <div class="name">仓库维护管理</div>
                <div class="code-name">#icon-cangweiweihu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiwujichushezhi"></use>
                </svg>
                <div class="name">价格维护</div>
                <div class="code-name">#icon-caiwujichushezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyuedingdan"></use>
                </svg>
                <div class="name"> 预约订单</div>
                <div class="code-name">#icon-yuyuedingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sheji"></use>
                </svg>
                <div class="name">墓穴设计</div>
                <div class="code-name">#icon-sheji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hebingxingzhuang"></use>
                </svg>
                <div class="name">物品领取</div>
                <div class="code-name">#icon-hebingxingzhuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tixing1"></use>
                </svg>
                <div class="name">提醒</div>
                <div class="code-name">#icon-tixing1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yewutongji"></use>
                </svg>
                <div class="name">业务统计</div>
                <div class="code-name">#icon-yewutongji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-hulvegaojing"></use>
                </svg>
                <div class="name">退墓管理</div>
                <div class="code-name">#icon-icon-hulvegaojing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianxie"></use>
                </svg>
                <div class="name">描金描红</div>
                <div class="code-name">#icon-tianxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yewubanli1"></use>
                </svg>
                <div class="name">业务办理</div>
                <div class="code-name">#icon-yewubanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiaoguanli"></use>
                </svg>
                <div class="name">营销管理</div>
                <div class="code-name">#icon-yingxiaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangongdangan"></use>
                </svg>
                <div class="name">档案管理</div>
                <div class="code-name">#icon-yuangongdangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuwuguanli"></use>
                </svg>
                <div class="name">服务管理</div>
                <div class="code-name">#icon-fuwuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongdanqueren"></use>
                </svg>
                <div class="name">工单确认</div>
                <div class="code-name">#icon-gongdanqueren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiu1"></use>
                </svg>
                <div class="name">修缮维修</div>
                <div class="code-name">#icon-weixiu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodeyuyue"></use>
                </svg>
                <div class="name">预约记录</div>
                <div class="code-name">#icon-wodeyuyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huizhanzhongxin"></use>
                </svg>
                <div class="name">纪念馆/博物馆/会展中心</div>
                <div class="code-name">#icon-huizhanzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyiguanli"></use>
                </svg>
                <div class="name">会议管理</div>
                <div class="code-name">#icon-huiyiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenqing"></use>
                </svg>
                <div class="name">申请</div>
                <div class="code-name">#icon-shenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangkuguanli-"></use>
                </svg>
                <div class="name">仓库管理</div>
                <div class="code-name">#icon-cangkuguanli-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chukuguanli-"></use>
                </svg>
                <div class="name">出库管理</div>
                <div class="code-name">#icon-chukuguanli-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rukuguanli-"></use>
                </svg>
                <div class="name">入库管理</div>
                <div class="code-name">#icon-rukuguanli-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hetongguanli1"></use>
                </svg>
                <div class="name">合同管理</div>
                <div class="code-name">#icon-hetongguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--"></use>
                </svg>
                <div class="name">cloud-port</div>
                <div class="code-name">#icon--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichushezhi"></use>
                </svg>
                <div class="name">基础设置</div>
                <div class="code-name">#icon-jichushezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuangongdangan1"></use>
                </svg>
                <div class="name">员工档案</div>
                <div class="code-name">#icon-yuangongdangan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoshouliebiao"></use>
                </svg>
                <div class="name">销售列表</div>
                <div class="code-name">#icon-xiaoshouliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigou-"></use>
                </svg>
                <div class="name">采购管理</div>
                <div class="code-name">#icon-caigou-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangchuguanli-cangkuguanli"></use>
                </svg>
                <div class="name">仓储物品进出统计</div>
                <div class="code-name">#icon-cangchuguanli-cangkuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixinduanguanli"></use>
                </svg>
                <div class="name">微信端管理</div>
                <div class="code-name">#icon-weixinduanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuwuguanli1"></use>
                </svg>
                <div class="name">服务中心</div>
                <div class="code-name">#icon-fuwuguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiazuzupu-"></use>
                </svg>
                <div class="name">家族族谱</div>
                <div class="code-name">#icon-jiazuzupu-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishijilu"></use>
                </svg>
                <div class="name">综合业务查询</div>
                <div class="code-name">#icon-lishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiufuwuzhongxin"></use>
                </svg>
                <div class="name">工程服务</div>
                <div class="code-name">#icon-weixiufuwuzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juecefenxi"></use>
                </svg>
                <div class="name">决策分析</div>
                <div class="code-name">#icon-juecefenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongjifenxi1"></use>
                </svg>
                <div class="name">业务统计分析</div>
                <div class="code-name">#icon-tongjifenxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taocanxiaoshoubaobiao"></use>
                </svg>
                <div class="name">销售列表</div>
                <div class="code-name">#icon-taocanxiaoshoubaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmuxiaoshoubaobiao"></use>
                </svg>
                <div class="name">销售报表</div>
                <div class="code-name">#icon-xiangmuxiaoshoubaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongjifenxi2"></use>
                </svg>
                <div class="name">趋势分析统计</div>
                <div class="code-name">#icon-tongjifenxi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenheguanli"></use>
                </svg>
                <div class="name">审核管理</div>
                <div class="code-name">#icon-shenheguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongdanguanli"></use>
                </svg>
                <div class="name">工单管理</div>
                <div class="code-name">#icon-gongdanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biangengguanli1"></use>
                </svg>
                <div class="name">墓位墓区变更</div>
                <div class="code-name">#icon-biangengguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangkuguanli"></use>
                </svg>
                <div class="name">仓库管理</div>
                <div class="code-name">#icon-cangkuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanshezhi"></use>
                </svg>
                <div class="name">会员设置</div>
                <div class="code-name">#icon-huiyuanshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xindaofangguanli"></use>
                </svg>
                <div class="name">到访管理</div>
                <div class="code-name">#icon-xindaofangguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuwudengji1"></use>
                </svg>
                <div class="name">服务登记</div>
                <div class="code-name">#icon-fuwudengji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cangkuguanlikufangguanli"></use>
                </svg>
                <div class="name">仓库管理</div>
                <div class="code-name">#icon-cangkuguanlikufangguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wupinguanli-05"></use>
                </svg>
                <div class="name">物品管理</div>
                <div class="code-name">#icon-wupinguanli-05</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-operation_business_icon"></use>
                </svg>
                <div class="name">墓位证打印</div>
                <div class="code-name">#icon-operation_business_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuanguanli1"></use>
                </svg>
                <div class="name">结算管理</div>
                <div class="code-name">#icon-jiesuanguanli1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiaotongji-01"></use>
                </svg>
                <div class="name">营销统计</div>
                <div class="code-name">#icon-yingxiaotongji-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangyang"></use>
                </svg>
                <div class="name">地域分析报表</div>
                <div class="code-name">#icon-fangyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goumaijilu1"></use>
                </svg>
                <div class="name">购买记录</div>
                <div class="code-name">#icon-goumaijilu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exit-full"></use>
                </svg>
                <div class="name">寄存取走</div>
                <div class="code-name">#icon-exit-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biangengguanli2"></use>
                </svg>
                <div class="name">墓位证或权证变更</div>
                <div class="code-name">#icon-biangengguanli2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daikejisao"></use>
                </svg>
                <div class="name">代客祭扫</div>
                <div class="code-name">#icon-daikejisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kucunshangxiaxianguanli"></use>
                </svg>
                <div class="name">库存上下限管理</div>
                <div class="code-name">#icon-kucunshangxiaxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kehugenjin3"></use>
                </svg>
                <div class="name">客户跟进</div>
                <div class="code-name">#icon-kehugenjin3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongmui"></use>
                </svg>
                <div class="name">墓型管理设置</div>
                <div class="code-name">#icon-gongmui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiazhengqingjie"></use>
                </svg>
                <div class="name">修缮清理</div>
                <div class="code-name">#icon-jiazhengqingjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyuejilu"></use>
                </svg>
                <div class="name">预约记录</div>
                <div class="code-name">#icon-yuyuejilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanshezhi1"></use>
                </svg>
                <div class="name">会员设置</div>
                <div class="code-name">#icon-huiyuanshezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-shengtai1"></use>
                </svg>
                <div class="name">生态葬</div>
                <div class="code-name">#icon-a-shengtai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Inventoryofcirculationproducts"></use>
                </svg>
                <div class="name">仓库盘点</div>
                <div class="code-name">#icon-a-Inventoryofcirculationproducts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-OMS-dingdanzhihanggenzong"></use>
                </svg>
                <div class="name">墓位图，墓位信息</div>
                <div class="code-name">#icon-OMS-dingdanzhihanggenzong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanshengchan"></use>
                </svg>
                <div class="name">服务管理</div>
                <div class="code-name">#icon-anquanshengchan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiyongdanweiguanli"></use>
                </svg>
                <div class="name">墓位墓区设置</div>
                <div class="code-name">#icon-caiyongdanweiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lzgl1"></use>
                </svg>
                <div class="name">落葬管理1</div>
                <div class="code-name">#icon-lzgl1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cixiang1"></use>
                </svg>
                <div class="name">瓷像1</div>
                <div class="code-name">#icon-cixiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beiwen1"></use>
                </svg>
                <div class="name">碑文1</div>
                <div class="code-name">#icon-beiwen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongchengfuwu"></use>
                </svg>
                <div class="name">工程服务登记</div>
                <div class="code-name">#icon-gongchengfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goumaijilu2"></use>
                </svg>
                <div class="name">购买记录</div>
                <div class="code-name">#icon-goumaijilu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kezi1"></use>
                </svg>
                <div class="name">刻字</div>
                <div class="code-name">#icon-kezi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kehudengji1"></use>
                </svg>
                <div class="name">客户登记</div>
                <div class="code-name">#icon-kehudengji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijianshezhi"></use>
                </svg>
                <div class="name">时间设置</div>
                <div class="code-name">#icon-shijianshezhi</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
